<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%-- ssx --%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath %>">
<title>商品分类销售统计</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%-- 引用layui.css --%>
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css"href="<%=basePath %>css/common.css" />
</head>
<body>
	<div class="ibox">
		<div class="ibox-content bodycss">
			<!-- 表单搜索 开始 -->
		 	<section class="panel panel-padding ">
			<form class="layui-form layui-form-pane form-search"
				onsubmit="return false" method="get">
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label" style="top:15px">日期</label>
					<div class="layui-input-inline">
				              <input type="datetime" name="startTime" class="layui-input" id="startTime" placeholder="开始时间" >
				        </div>
				</div>
				
				<div class="layui-form-item layui-inline">
					
					<div class="layui-input-inline">
				            <input type="datetime" name="endTime"  id="endTime"  placeholder="结束时间" class="layui-input">
				        </div>
				</div>
				<div class="layui-form-item layui-inline">
					<button class="layui-btn layui-btn-primary" lay-submit lay-filter="seach">
						<i class="layui-icon"></i> 搜 索
					</button>
				</div>
			</form>
						</section>
			<!-- 表单搜索 结束 -->
			<section class="panel panel-padding " style="float: left; width: 840px">
				
			<table class="layui-table"
				lay-data="{
	                        id: 'spfl',
	                        width:'840',
	                         height:'475',
	                        url:'sfj/list.do',
	                        page:true,
	                        even:true,
	                        skin:'row',
	                        limits:[10,20,30,40,50],
	                        limit:10}"
				lay-filter="popedomLay">
				<thead>
					<tr>
						
						<th lay-data="{field:'goods_name', width:120,align:'center'}">分类名称</th>
						<th lay-data="{field:'property', width:200,align:'center'}">商品属性</th>
						<th lay-data="{field:'goods_amount', width:120,align:'center'}">商品销售金额</th>
						<th lay-data="{field:'arrived_amount', width:200,align:'center'}">积分抵扣金额</th>
						<th lay-data="{field:'pay', width:200,align:'center'}">实际收款</th>
						
					</tr>
				</thead>
			</table>
			
			</section>
			<div id="FLTJright" style="float: left; display: block; margin: 5px 5px;  width:500px;
		        height: 100%; border: solid 0px #CCC; line-height: 18px; background: #FFF;" >
		         <div id="XSTJchartHolder" style="width:100%;height: 500px;"></div>
		     </div>
		</div>
		
	</div>

	<script type="text/javascript" src="<%=basePath %>js/common/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/business/highcharts/highcharts.js"></script>
    <script type="text/javascript" >
$(function () {
		 var _xtext = [];
		 var _data1 = [];
		 var _data2 = [];
		 var _data3 = [];
		 
		 
		<c:forEach items="${list}" var="obj">
		 	_xtext.push("${obj.goods_name}(${obj.property})");
		 	_data1.push(${obj.goods_amount});
		 	_data2.push(${obj.arrived_amount});
		 	_data3.push(${obj.pay});
		</c:forEach> 

		  var chart = {
			type: 'column',
			reflow:true,
		  };
		  var title = {
		  	text: '商品销售统计',
		  };
		  var yAxis = {
		 	allowDecimals: false,
		 	title: {
		 		text: '金额',
		 	}
		  };
		  var xAxis = {//X轴标签   
			categories:_xtext,
			crosshair: true,
		  };
		  var series = [{
		            name: "商品销售金额",  
		            data:_data1,
		            },{
		            name: "积分抵扣金额",  
		            data:_data2,
		            },{
		            name: "实际收款金额",  
		            data:_data3,
		            }
		        ]
		  var tooltip = {
		      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    		  pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      		   '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
  		     footerFormat: '</table>',
     		 shared: true,
     		 useHTML: true,
		  };
		  var plotOptions = {
    		  column: {
	      		  pointPadding: 0.2,
	       		  borderWidth: 0,
   		  	  }
 		  }; 
		  var credits = {
		     enabled: false,
		  };
     	  var json = {};
	      json.chart = chart;
		  json.title = title; 
		  json.tooltip = tooltip;
		  json.xAxis = xAxis;
	      json.yAxis = yAxis;
	      json.series = series;
	      json.plotOptions = plotOptions;
	      json.credits = credits;  
	      $("#XSTJchartHolder").highcharts(json);
});
</script>
	
	<script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
	<script type="text/javascript">
	layui.config({
	    base: "<%=basePath%>js/common/"
	}).use(["common", "element", "layer", "form", "table", "jquery","laydate"], function(){
			var elem = layui.element;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			var $ = layui.jquery;
			var laydate =layui.laydate;
			var nowTime =new Date().valueOf();
			layui.common.init();
			
			/* 时间段 */
					 var start = laydate.render({
		        elem: '#startTime',
		        type: 'datetime',
		        format:'yyyy-MM-dd',
		        max: nowTime,
		        btns: ['clear', 'confirm'],
		        done: function(value, date){
		            endMax = end.config.max;
		            end.config.min = date; //最大时间为结束时间的开始值
		            end.config.min.month = date.month -1;
		        }
		    });
		    
		    var end = laydate.render({
		        elem: '#endTime',
		        type: 'datetime',
		        max:  4073558400000,
		        format:'yyyy-MM-dd',
		        min:nowTime,
		        done: function(value, date){
		            if($.trim(value) == ''){
		                var curDate = new Date();
		                date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
		            }
		            start.config.max = date;//最小时间为开始时间的最大值
		            start.config.max.month = date.month -1;
		        }
		    })
		    
		    
			/**
			 * 监听刷新表格
			 */
		form.on('submit(seach)', function(data){
		 console.log(JSON.stringify(data.field));
			table.reload('spfl', {
				where: data.field,
				page : {
					curr : 1
				}
			});
			return false;
		});
		
	});
</script>
</body>
</html>